<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../js/bootstarp-3.3.7/css/bootstrap.min.css" />
		<script src="../js/bootstarp-3.3.7/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../js/bootstarp-table-1.11.1/bootstrap-table.min.css" />
		<script src="../js/bootstarp-table-1.11.1/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstarp-table-1.11.1/bootstrap-table-zh-CN.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/echarts.js"></script>
		<!-- 引入 vintage 主题 -->
		<script src="../js/shine.js"></script> 
		
		
		
		<script type="text/javascript">
			$(function () {  //, headers: { 'x-requested-with': 'XMLHttpRequest' }
		        $.ajaxSetup({crossDomain: true, xhrFields: {withCredentials: true}});
		    });
			var xmmc = [];
			var bxmje = [];
			$(function() {

				//格式化时间日期
				var tiem = new Date();
				//除了数字以外全部都替换为-
				var ftime = tiem.toLocaleDateString().replace(/[^0-9]/ig, "-");
				//				var ftiem = tiem.toLocaleDateString().replace(/[^0-9]/ig, "/");
				//				.substr(0, tiem.toLocaleDateString().length - 1)
				if(tiem.getMonth() + 1 < 10) {
					ftime = ftime.replace("-", "-0");
				}
				if(tiem.getDate() < 10) {
					ftime = ftime.replace(/[^0]$/, "0" + tiem.getDate());
				}
				$("#time2").val(ftime.replace(/[^0-9]/ig, "-"));
				$("#time1,#time2").attr("max", ftime.replace(/[^0-9]/ig, "-"));
				var chart = echarts.init(document.getElementById('main'), 'shine');
				testBg(chart);
				locaBg(chart);

				$("#listtable").bootstrapTable({
					method: "GET",
					dateType: "JSON",
					url: "http://127.0.0.1:8099/Ins_pro_StaController/queryAllAndBlur",
					pagination: true,
					pageSize: 3, 
					queryParams: queryParams,
					columns: [{
						field: '',
						title: '序号',
						align: 'center',
						valign: 'middle',
						formatter: function(value, row, index) {
							return index + 1;
						}
					}, {
						field: 'goods_name',
						title: '项目名称',
						align: 'center',
						valign: 'middle'
					}, {
						field: 'countPro',
						title: "项目数量",
						align: 'center',
						valign: 'middle'
					}, {
						field: 'amount',
						title: '项目总金额',
						align: 'center',
						valign: 'middle'
					}]
				})

				$("#butt1").on("click", function() {
					var tiem1 = $("#time1").val();
					var tiem2 = $("#time2").val();
					if(tiem1 > tiem2) {
						$("#time1").val(tiem2);
						$("#time2").val(tiem1);
					}
//					if(!isNaN(Date.parse(tiem1) / 1000)) {
//						if(!isNaN(Date.parse(tiem2) / 1000)) {
//
//						}
//					}
					if(isNaN(Date.parse(tiem2) / 1000)) {
						$("#time2").val(tiem1);
					}
					testBg(chart);
					locaBg(chart);
					$("#listtable").bootstrapTable('refresh');
				})

			})

			//			alert(Date.parse(new Date) / 1000);

			function testBg(chart) {
				chart.showLoading();
				$.ajax({
					type: "GET",
					url: "http://127.0.0.1:8099/Ins_pro_StaController/queryAllAndBlur",
					data: "startTime=" + Date.parse($("#time1").val()) / 1000 + "&endTime=" + ((Date.parse($("#time2").val()) / 1000) + 86400),
					dataType: "JSON",
					async: false,
					success: function(sj) {
						var zje = 0;
						var zsl = 0;
						xmmc = [];
						bxmje = [];
						$.each(sj, function(index, value) {
							zsl = zsl + value.countPro;
							zje = zje + value.amount;
							$("#jcxms").val(zsl);
							$("#hjxmsr").val(zje);
							xmmc.push(value.goods_name);
							bxmje.push(value.amount);
						});
					}
				});
				chart.hideLoading();
			}

			function locaBg(chart) {
				
				chart.setOption({
					color: ['#3398DB'],
					title: {
						text: '检查项目统计'
					},
					tooltip: { 
						trigger: 'axis',
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					legend: {
						data: ['收入']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						data: [],
						axisTick: {
							alignWithLabel: true
						}
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [{
						name: '收入',
						type: 'bar',
						barWidth: '60%',
						data: []
					}]
				})
				chart.setOption({
					xAxis: {
						data: xmmc
					},
					series: [{
						data: bxmje
					}]
				});
			}

			function queryParams() {
				return {
					'startTime': Date.parse($("#time1").val()) / 1000,
					'endTime': Date.parse($("#time2").val()) / 1000 + 86400
				}
			}
		</script>
	</head>

	<body>
		<div style="background: #29ADEB;">
			<h3>收支概况:</h3>
			<h5>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;检查项目数:
				<input type="text" style="border-style: none none solid none;background-color:transparent" name="" id="jcxms" readonly="readonly" unselectable="on" value="" /></h5>
			<h5>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;合计项目收入:
				<input type="text" style="border-style: none none solid none;background-color:transparent" name="" id="hjxmsr" readonly="readonly" unselectable="on" value="" /></h5>
		</div>
		<table id="main" style="width: 100%;height:400px;">
		</table>
		<form id="form1" class="form-inline">
			<input type="date" class="form-control" style="width: 200px;" name="StartTime" id="time1" />
			<input type="date" class="form-control" style="width: 200px;" name="EndTime" id="time2" />
			<input type="button" class="btn btn-default" value="查询" id="butt1" />
		</form>

		<table id="listtable">

		</table>

	</body>

</html>